import React from 'react';
import { inject, observer } from 'mobx-react';
import { Modal } from 'antd';
import TestTree from './components/testTree';
import WorkSpace from './components/workspace';
import ToolBar from './components/toolbar';
import Element from './components/element';
import Code from './components/code';
import './index.less';

@inject('store')
@observer
class Home extends React.Component {
  componentDidMount() {}
  createProject() {}
  export() {
    this.props.store.project.export();
  }
  handleCancel() {
    this.props.store.system.showCode = false;
  }
  render() {
    const { showCode = false } = this.props.store.system;
    return (
      <div className="project">
        <div className="toolbar">
          <TestTree />
        </div>
        <div className="workspace">
          <ToolBar />
          <WorkSpace />
        </div>
        <div className="element">
          <Element />
        </div>
        <div>
          <Modal
            title="预览"
            visible={showCode}
            onOk={() => this.export()}
            okText="导出"
            cancelText="关闭"
            onCancel={() => this.handleCancel()}
            width={1000}
          >
            <Code />
          </Modal>
        </div>
      </div>
    );
  }
}

export default Home;
